<template>
  <div class='employRoster'>
      
      
      <!-- 标题区域 开始 -->

      <section class="title">
          <h1>员工花名册</h1>
          <!-- <el-button @click='huzhaoDialogVisible = true'>测试用</el-button> -->
      </section>


      <!-- 标题区域 结束 -->


      <section class="form">

          <!-- 上表单  (精简信息) 开始-->
      
       <el-form 
		    :model="formTop"
        class='formTop'
        label-position="right"
        label-width="150px"
			 >

          <!-- 上表单 左边 开始-->
        <div class="formTop-left">
          <el-form-item label='业务单位' required>
            <el-select clearable size='small' v-model="formTop.one.model" @change='yewudanweiChange(true)' style="width:30%">
              <el-option v-for='(k,i) in formTop.one.selectList' :key='i' :label="k.business_descr" :value='k.setid'></el-option>
            </el-select>
          </el-form-item> 


          <el-form-item label='部门'>
            <div data-type='部门' @mouseleave='visible.bumen = false' @mouseenter.stop='bumenHover'>
              <el-input readonly  @keyup.native.delete = 'emptyInputVal' data-type='部门' id='bumen' :disabled='!formTop.one.model' :value='formTop.one.model?handleEmptyValue(formTop.two.inputValue):"请先选择业务单位"' :on-icon-click='handleIconClick' @focus='handleIconClick' @keyup.enter.native.focus='handleIconClick'  size='small' icon="search" style="width:30%"></el-input>
                <i @click.stop= 'delInputVal' data-type='部门' class='close-x el-icon-circle-cross' v-show='visible.bumen'></i>
                <el-checkbox v-model='formTop.two.showIf' :disabled='!formTop.one.model' style="margin-left:10px">是否包含子部门</el-checkbox> 
            </div>
            
          </el-form-item> 

          <el-form-item label='发薪组织'>
           <div data-type='发薪组织' @mouseleave='visible.faxinzuzhi = false' @mouseenter.stop='bumenHover'>

              <el-input data-type='发薪组织'
              readonly 
              @keyup.native.delete = 'emptyInputVal'
              id='faxinzuzhi'
              @focus = 'handleIconClick'
              :on-icon-click='handleIconClick' 
              @keyup.enter.native='handleIconClick'
                size='small' icon="search" 
                :value='handleEmptyValue(formTop.three)'
                style="width:30%"></el-input>
               <i @click.stop= 'delInputVal' data-type='发薪组织' class='close-x el-icon-circle-cross' v-show='visible.faxinzuzhi'></i>

            </div>

          </el-form-item> 

          <el-form-item label='年龄'>
              <el-slider
                v-if='qqc'
                v-model="formTop.fouth"
                range
                :max='100'
                :min='1'
                v-appendInfo='formTop.fouth'
                :show-tooltip='false'
                style="width:30%">
            </el-slider>
          </el-form-item> 

          <el-form-item label='性别'>
            <el-checkbox-group v-model='formTop.five'>

              <el-checkbox label='男'>
              </el-checkbox>

              <el-checkbox label='女'>
                  
              </el-checkbox>
              
              <el-checkbox label='未知'>
                  
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item> 

          <el-form-item label='婚姻状况'>
            <el-checkbox-group v-model='formTop.six'>
              <el-checkbox label='已婚'></el-checkbox>
              <el-checkbox label='未婚'></el-checkbox>
              <el-checkbox label='离异'></el-checkbox>
              <el-checkbox label='丧偶'></el-checkbox>
              <el-checkbox label='未知'></el-checkbox>
            </el-checkbox-group>

          </el-form-item> 

          <el-form-item label='HR状况'>
            <el-select clearable size='small' v-model="formTop.seven.model" style="width:30%">
              <el-option v-for='(k,i) in formTop.seven.selectList' :label='k.hr_status_descr' :value='k.hr_status'></el-option>
            </el-select>
          </el-form-item> 

          <el-form-item label='政治面貌'>
            <el-select clearable size='small' v-model="formTop.eight.model" style="width:30%">
              <el-option v-for='(k,i) in formTop.eight.selectList'  :value='k.political_sta_chn' :label='k.political_sta_chn_desc'></el-option>
            </el-select>
          </el-form-item> 

          <el-form-item label='最高学历'>
            <el-select clearable v-model='formTop.nine.model' size='small' style="width:30%">
              <el-option v-for='(k,i) in formTop.nine.selectList' :value='k.highest_edu'></el-option>
            </el-select>

          </el-form-item> 

          <div>
           

            <span 
              v-show='!showAll'
              class="button"
              :class='{"is-select":showAll}'
              @click.stop='handleAllInfo'>全部搜索信息</span>

               <el-button @click.stop ='searchAjax' v-show='!showAll' style='margin:0 15px' type='primary'>搜索</el-button>

            <span v-show='!showAll' class='saveSearch' @click.stop='saveSearch'>保存当前搜索条件</span>
          </div>
        </div>

        <!-- 上表单 左边 结束-->



        <!-- 上表单 右边 开始-->

        <div class="formTop-right">
          <h2>最近使用的搜索条件</h2>
          <div>
            <p v-for='(k,i) in searchCheckList' v-if='searchCheckList.length'>
              <el-checkbox v-model='searchCheckModel[i]' @change='handleSearchCheck(i)' class='check'></el-checkbox>
              <span @click='spanClick(i)' class='name' :class='{select:searchCheckModel[i]}' :title='k.conditionName'>{{k.conditionName}}</span>
              <i @click.stop='deleteClick(i)' class='el-icon-circle-cross' style='color:#CECECE'></i>
            </p>
            
            <el-dialog
              title='提示'
              :visible.sync="visible2"
              :lock-scroll='false'
              size='tiny'
              v-model="visible2">
              <p style="padding:10px 0">确定删除该搜索条件吗？</p>
              <div style="text-align: right; margin: 0">
                <el-button type="text" @click="visible2 = false">取消</el-button>
                <el-button type="primary"  @click="sureDelete">确定</el-button>
              </div>
            </el-dialog>
          </div>
        </div>

        <!-- 上表单 右边 结束-->


        <!-- 上表单  (精简信息) 结束-->

       </el-form>


        <!-- 下表单  (全部信息) 开始-->

      
        <el-form 
          :model="formBottom"
          class='formBottom'
          label-position="right"
          label-width="150px"
          inline 
			  >
          <el-collapse-transition>

            <div class="transition-wrap" v-show='showAll'>

              <el-form-item label='员工姓名'>

                

                <div data-type='员工姓名'
                  @mouseleave='visible.yuangongxingming = false' @mouseenter.stop='bumenHover'
                >
                  
                    <el-input v-model='formBottom.one.left' data-type='员工姓名' size='small' style="width:135%"></el-input>
                     <i
                       @click.stop= 'delInputVal'
                       data-type='员工姓名'
                       style='left:120%' 
                       class='close-x el-icon-circle-cross' v-show='visible.yuangongxingming'></i>
                      
                </div>

                

            
              </el-form-item>  

              <el-form-item label='员工ID' class="marginLeft-12">

                


                <div data-type='员工ID'
                  @mouseleave='visible.yuangongID = false' @mouseenter.stop='bumenHover'
                >
                  
                   <el-input id='yuangongID' :value='handleEmptyValue(formBottom.one.right)' data-type='员工ID' :on-icon-click='handleIconClick' @keyup.enter.native='handleIconClick' size='small' icon="search" style="width:118%"></el-input>
                     <i
                       @click.stop= 'delInputVal'
                       data-type='员工ID'
                       style='left:97.5%' 
                       class='close-x el-icon-circle-cross' v-show='visible.yuangongID'></i>
                      
                </div>

              </el-form-item>  

              <el-form-item label='身份证编号'>

                <div data-type='身份证编号'
                  @mouseleave='visible.shenfenID = false' @mouseenter.stop='bumenHover'
                >
                  
                  <el-input v-model='formBottom.two.left' data-type='身份证编号' size='small' style="width:135%"></el-input>
                  <i
                    @click.stop= 'delInputVal'
                    data-type='身份证编号'
                    style='left:120%' 
                    class='close-x el-icon-circle-cross' v-show='visible.shenfenID'></i>
                      
                </div>
            
                

              </el-form-item>

              <el-form-item label='EAS编码' class="marginBottom-40 marginLeft-12">
            
               


                <div data-type='EAS编码'
                  @mouseleave='visible.easID = false' @mouseenter.stop='bumenHover'
                >
                  <el-input v-model='formBottom.two.right' data-type='EAS编码' size='small' style="width:135%"></el-input>
          
                  <i
                    @click.stop= 'delInputVal'
                    data-type='EAS编码'
                    style='left:120%' 
                    class='close-x el-icon-circle-cross' v-show='visible.easID'></i>
                      
                </div>

              </el-form-item>


             
              
              <el-form-item label='员工类别'>
              
                <el-select clearable size='small' v-model='formBottom.three.left.model' style="width:118%">
                  <el-option v-for='(k,i) in formBottom.three.left.selectList' :key='i' :value='k.empl_class' :label='k.empl_class_desc'></el-option>
                </el-select>
              </el-form-item> 


              <el-form-item label='员工大类' class="marginLeft-10">
              
                <el-select clearable v-model='formBottom.three.right.model' size='small' style="width:118%">
                  <el-option v-for='(k,i) in formBottom.three.right.selectList' :key='i' :value='k.c_posn_clan' :label='k.posn_clan_desc'></el-option>
                </el-select>
              </el-form-item> 


              <el-form-item label='员工属性'>
              
                <el-select clearable v-model='formBottom.fouth.left.model' size='small' style="width:118%">
                  <el-option v-for='(k,i) in formBottom.fouth.left.selectList' :key='i' :value='k.c_empl_attr' :label='k.empl_attr_desc'></el-option>
                </el-select>

              </el-form-item> 


              <el-form-item label='员工属性子类' class="marginLeft-10">
              
                <el-select clearable v-model='formBottom.fouth.right.model' size='small' style="width:70%">
                  <el-option v-for='(k,i) in formBottom.fouth.right.selectList' :key='i' :label='k.empl_sub_attr_desc' :value='k.c_empl_sub_attr'></el-option>
                </el-select>

              </el-form-item>
              
              


              <el-form-item label='专业类别代码' class="marginBottom-40">
              
                <el-select clearable v-model='formBottom.five.left.model' size='small' style="width:70%">
                  <el-option 
                  v-for='(k,i) in formBottom.five.left.selectList'
                   :key='i'
                   :label='k.profss_tp_desc' 
                   :value='k.c_profss_tp_id'></el-option>
                </el-select>
              </el-form-item> 

              <el-form-item label='主要专业类别' class="marginLeft-10">
                  <div style='width:220px'>
                    <el-checkbox v-model='formBottom.five.right'></el-checkbox>
                  </div>
              </el-form-item>


              <el-form-item label='职务职责编码'>
              
                <el-select 
                 clearable
                 @change='zhiwuzhizeChange'
                 v-model='formBottom.six.left.model'
                  size='small' style="width:118%">
                  <el-option
                   v-for='(k,i) in formBottom.six.left.selectList'
                   :label='k.job_func_desc'
                   :value='k.job_function'
                   :key='i'
                   ></el-option>
                </el-select>
              </el-form-item> 


              <el-form-item label='职务副职责' class="marginLeft-10">
              
               

                <div data-type='职务副职责' @mouseleave='visible.zhiwufuzhize = false' @mouseenter.stop='bumenHover'>

                    <el-input 
                      readonly 
                      @keyup.native.delete = 'emptyInputVal'
                      data-type='职务副职责'
                      :disabled='!bh'
                      id='zhiwufuzhize'
                      :value='bh?handleEmptyValue(formBottom.six.right):"请先选择职务职责代码"'
                      :on-icon-click='handleIconClick'
                      @focus = 'handleIconClick'
                      @keyup.enter.native='handleIconClick' 
                      size='small' icon="search"
                      style="width:118%"
                      >
                     </el-input>

                     <i style='left:97%' @click.stop= 'delInputVal' data-type='职务副职责' class='close-x el-icon-circle-cross' v-show='visible.zhiwufuzhize'></i>
                </div>
                    


                    

              </el-form-item> 


              <el-form-item label='集团标准职级'>
              
                <el-select clearable v-model='formBottom.seven.left.model' size='small' style="width:118%">
                  <el-option 
                     v-for='(k,i) in formBottom.seven.left.selectList'
                     :label='k.grp_lvl_descr'
                     :value='k.c_grp_supv_lvl'
                    :key='i'
                   >  
                   </el-option>
                </el-select>
                
              </el-form-item> 


              <el-form-item label='二级公司标准职级' class="marginLeft-10">
              
                <el-select clearable v-model='formBottom.seven.right.model' size='small' style="width:118%">
                  <el-option
                   v-for='(k,i) in formBottom.seven.right.selectList'
                   :label='k.sta_lvl_descr'
                   :value='k.c_sta_supv_lvl'
                   :key='i'></el-option>
                </el-select>
              </el-form-item> 

              

              

              <div>
                 <el-form-item label='高管身份' class="marginBottom-40">
              
                    <el-select clearable v-model='formBottom.eight.model' size='small' style='width:70%'>
                      <el-option v-for='(k,i) in formBottom.eight.selectList' :value='k.leader_type'></el-option>
                    </el-select>

                  </el-form-item> 
              </div>

              <el-form-item label='海外人才'>
              
                 <el-select clearable v-model='formBottom.nine.left.model' size='small' style='width:70%'>
                  <el-option v-for='(k,i) in formBottom.nine.left.selectList' :value = 'k.c_ovsea_talent' :label='k.ovsea_talent_desc'></el-option>
                </el-select> 

              </el-form-item>  


              

              <el-form-item label='是否海外派遣' class="marginLeft-10">
                  <div style='width:220px'>
                    <el-checkbox v-model='formBottom.nine.right'></el-checkbox>
                  </div>
              </el-form-item>

              <el-form-item label='语言技能' class="marginBottom-40">
          
                 <el-select clearable v-model='formBottom.ten.left.model' size='small' style='min-width:118%' multiple>
                   <el-option v-for='(k,i) in formBottom.ten.left.selectList' :value='k.c_language_type_desc'></el-option>
                </el-select>

              </el-form-item> 


              <el-form-item label='以前工作国家/地区' class="marginLeft-10">
          
                <el-select clearable v-model='formBottom.ten.right.model' size='small' style='width:70%'>
                  <el-option 
                   v-for='(k,i) in formBottom.ten.right.selectList'
                    :key='i'
                   :label='k.country_desc'
                    :value='k.country_code'></el-option>
                </el-select>       

              </el-form-item> 


              <div>

                <el-form-item label='个人身份'>
          
                  <el-checkbox-group v-model='formBottom.tenone'>
                    <el-checkbox label='包含兼岗'></el-checkbox>
                    <el-checkbox label='独生子女证'></el-checkbox>
                    <el-checkbox label='特困人员'></el-checkbox>
                    <el-checkbox label='援疆'></el-checkbox>
                    <el-checkbox label='援藏'></el-checkbox>
                  </el-checkbox-group>
                </el-form-item> 

              </div>

              <div class="solong">
                <el-form-item label='特长'>
                  <el-input 
                    placeholder='关键词之间请用英文逗号隔开'
                    type="textarea"
                    :autosize="{ minRows: 4}"
                    v-model='formBottom.tentwo'
                    style='width:244%'>
                  </el-input>
                </el-form-item> 
              </div>


              <div style='margin-top:15px'>

                <span 
                  class="button"
                  :class='{"is-select":!showAll}'
                  @click.stop='showAll=!showAll'>精简搜索信息</span>

                <el-button @click.stop='searchAjax' style='margin:0 15px' type='primary'>搜索</el-button>

                <span class='saveSearch' @click.stop='saveSearch'>保存当前搜索条件</span>
                

              </div>

            </div>

         </el-collapse-transition>

       </el-form> 

         
        
        <!-- 下表单  (全部信息) 结束-->



      </section>
      
      <section class='employRoster-table' v-show='tableShow'>
        <div class='table-color'></div>
          <div class="table-form">
             <form
                method="post"
                target='employRoster-list'
                :action='this.Axios.baseURI+"/reportExcel/empRosterExport"'
                id='downLoadForm'
                style='display:none'></form>
              
             <iframe style='display:none' name="employRoster-list" id="employRoster_hidden_frame"></iframe> 

                 
             <el-button type='success' :loading="donwLoadLoading" @click.stop = 'downLoadExcel'>导出excel表单</el-button>
          </div>
        <div class="table-select">
          <el-button @click.stop='showSelectDialog = true'>自定义表格内容<i class="el-icon-edit el-icon--right"></i></el-button>
        </div>
        
        <v-table :tableOptionSelect='tableOptionAsync' :tableDatas='tableDatas'></v-table>
        <div class="fenye">
          <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="page.pageNum"
           :page-size="page.pageSize"
          :page-sizes="[50, 100, 200, 400]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
          >

          </el-pagination>
        </div>
      </section>

      

      <v-dialog
        :dialogShowIf.sync='dialogShowIf'
        :type='type'
        :setid='setid'
        :bh = 'bh'
        @formTop_three = 'getTableSelected'
        @formTop_two = 'getTableSelected'
        @formBottom_one_left = 'getTableSelected'
        @formBottom_six_right = 'getTableSelected'
      >
      </v-dialog>

      <!-- 保存搜索规则 -->

      

      <!-- 自定义表格显示内容 -->

      <el-dialog 
        custom-class = 'dialog-check-wrap'
        title='表格显示的内容'
        :visible.sync="showSelectDialog"
        :lock-scroll='false'
        size='tiny'
        top='5vh'
       >
       <div class="dialog-check">
         <el-checkbox-group v-model = 'tableOptionSelect'>
          <p v-for='(k,i) in tableOptionDatas'>
            <el-checkbox :label='k.value'>{{k.label}}</el-checkbox>
          </p>
        </el-checkbox-group>
       </div>
        

         <span slot="footer" class="dialog-footer">
          <el-button type='primary' @click.stop="handleSure">保 存</el-button>
        </span>

      </el-dialog>

      <huzhao-dialog 
      :dialogShowIf.sync='huzhaoDialogVisible'>


      </huzhao-dialog>

  </div>
</template>

<script>
import Vue from "vue";
import CollapseTransition from 'element-ui/lib/transitions/collapse-transition';
import VDialog from '@/components/employRoster/dialog'
import HuzhaoDialog from '@/components/employee/requestVacation/huzhaoDialog'
import VTable from '@/components/employRoster/table'
import { TableOption } from '@/components/employRoster/table_option'
import {
  MessageBox,
  Message,
  Button,
  Switch,
  Select,
  Input,
  RadioGroup,
  Radio,
  Option,
  Table,
  TableColumn,
  Form,
  FormItem,
  Checkbox,
  CheckboxGroup,
  Slider,
  Pagination,

} from "element-ui";
Vue.use(Button);
Vue.use(Select);
Vue.use(Input);
Vue.use(Option);
Vue.use(Table);
Vue.use(TableColumn);
Vue.use(Form);
Vue.use(FormItem);
Vue.use(Checkbox);
Vue.use(CheckboxGroup);
Vue.use(Slider);
Vue.use(RadioGroup);
Vue.use(Radio);
Vue.use(Pagination);
Vue.component(CollapseTransition.name, CollapseTransition)

export default {
  components: {
    VDialog,
    VTable,
    HuzhaoDialog
  },
  data () {
    return {
      visible: {
        bumen: false,
        faxinzuzhi: false,
        zhiwufuzhize: false,
        yuangongxingming: false,
        yuangongID: false,
        shenfenID: false,
        easID: false
      },
      huzhaoDialogVisible: false,
      qqc: true,
      visible2: false,
      dialogShowIf: false,
      tableShow: false,
      donwLoadLoading: false,
      formTop: {
        one: {
          model: '',
          selectList: []
        },
        two: {
          inputValue: {
            info: '',
            id: ''
          },
          showIf: false
        },
        three: {
          id: '',
          info: ''
        },
        fouth: [1, 100],
        five: [],
        six: [],
        seven: {
          model: '',
          selectList: []
        },
        eight: {
          model: '',
          selectList: []
        },
        nine: {
          model: '',
          selectList: []
        },
        ten: ''
      },
      formBottom: {
        one: {
          left: '',
          right: {
            id: '',
            info: ''
          }
        },
        two: {
          left: '',
          right: ''
        },
        three: {
          left: {
            model: '',
            selectList: []
          },
          right: {
            model: '',
            selectList: []
          }
        },
        fouth: {
          left: {
            model: '',
            selectList: []
          },
          right: {
            model: '',
            selectList: []
          }
        },
        five: {
          left: {
            model: '',
            selectList: []
          },
          right: false
        },
        six: {
          left: {
            model: '',
            selectList: []
          },
          right: {
            id: '',
            info: ''
          },
        },
        seven: {
          left: {
            model: '',
            selectList: []
          },
          right: {
            model: '',
            selectList: []
          }
        },

        eight: {
          model: '',
          selectList: []
        },
        nine: {
          left: {
            model: '',
            selectList: []
          },
          right: ''
        },
        ten: {
          left: {
            model: '',
            selectList: []
          },
          right: {
            model: '',
            selectList: []
          }
        },
        tenone: [],
        tentwo: ''

      },
      showAll: false,
      ajaxFlag: true,
      type: null,
      showSelectDialog: false,
      tableOptionDatas: TableOption,
      tableOptionSelect: [],
      tableOptionAsync: [],
      tableDatas: [],
      searchCheckModel: [],
      searchCheckList: [],
      searchCheckIndex: null,
      page: {
        pageNum: 1,
        pageSize: 50,
        total: 0
      }
    }
  },

  computed: {
    setid () {
      return this.formTop.one.model
    },
    bh () {
      return this.formBottom.six.left.model
    },
    tableSelectLabel () {
      let result = []
      this.tableOptionDatas.forEach((ele, index, arr) => {
        if (this.tableOptionSelect.indexOf(ele.value) !== -1) {
          result.push(ele)
        }
      })

      return result
    }
  },

  mounted () {
    this.getBaseData()
    this.getSearchData()
    this.getDetailData()
  },


  methods: {
    delInputVal (event) {

      let e = event ? event : window.event

      let target = e.target || e.srcElement

      let type = target.getAttribute('data-type')

      switch (type) {

        case '部门':

          this.formTop.two.inputValue.info = ''
          this.formTop.two.inputValue.id = ''

          break;

        case '发薪组织':

          this.formTop.three.info = ''
          this.formTop.three.id = ''

          break;

        case '职务副职责':
          this.formBottom.six.right.info = ''
          this.formBottom.six.right.id = ''
          break;

        case '员工姓名':
          this.formBottom.one.left = ''

          break;

        case '员工ID':
          this.formBottom.one.right.id = ''
          this.formBottom.one.right.info = ''
          break;

        case '身份证编号':

          this.formBottom.two.left = ''
          break;

        case 'EAS编码':
          this.formBottom.two.right = ''
          break;

        default:
          break;

      }
    },

    bumenHover (event) {

      let e = event ? event : window.event

      let target = e.target || e.srcElement

      let type = target.getAttribute('data-type')

      switch (type) {

        case '部门':
          if (this.formTop.one.model && this.formTop.two.inputValue.info) {
            this.visible.bumen = true;
          }

          break;


        case '发薪组织':
          if (this.formTop.three.info && this.formTop.three.id) {
            this.visible.faxinzuzhi = true;
          }

          break;


        case '职务副职责':
          if (this.formBottom.six.left.model && this.formBottom.six.right.info) {
            this.visible.zhiwufuzhize = true;
          }
          break;

        case '员工姓名':
          if (this.formBottom.one.left) {
            this.visible.yuangongxingming = true;
          }

          break;

        case '员工ID':
          let val = document.querySelector('.employRoster').querySelector('#yuangongID').querySelector('input').value;

          if (this.formBottom.one.right.id || this.formBottom.one.right.info || val) {
            this.visible.yuangongID = true
          }
          break;

        case '身份证编号':

          if (this.formBottom.two.left) {
            this.visible.shenfenID = true
          }
          break;

        case 'EAS编码':
          if (this.formBottom.two.right) {
            this.visible.easID = true
          }
          break;

        default:
          break;

      }
    },
    spanClick (i) {
      this.searchCheckModel[i] = !this.searchCheckModel[i]
      this.handleSearchCheck(i)
    },
    zhiwuzhizeChange (val, val2) {

      this.formBottom.six.right.id = ''
      this.formBottom.six.right.info = ''
    },

    yewudanweiChange () {
      this.formTop.two.inputValue.id = ""
      this.formTop.two.inputValue.info = ""
    },

    deleteClick (i) {
      this.visible2 = true
      this.searchCheckIndex = i
    },

    sureDelete () {
      this.visible2 = false
      let del = this.searchCheckList.splice(this.searchCheckIndex, 1)
      let params = {
        conditionName: del[0].conditionName
      }
      this.Axios.Post(this.URL.deleteCondition.url, params)
        .then((res) => { console.log(res, 'ress') })
    },

    handleSizeChange (val) {
      this.page.pageSize = val
      this.getTableData()
    },
    handleCurrentChange (val) {
      this.page.pageNum = val
      this.getTableData()

    },

    emptyInputVal (event) {
      let e = event ? event : window.event

      let target = e.target || e.srcElement

      // let type = target.offsetParent.getAttribute('data-type')
      let type = target.offsetParent.getAttribute('data-type')

      let t = this.formTop, d = this.formBottom

      switch (type) {

        case '部门':
          t.two.inputValue.id = ''//部门
          t.two.inputValue.info = ''	//部门
          break;


        case '发薪组织':
          t.three.id = ''
          t.three.info = ''
          break;


        case '职务副职责':
          d.six.right.id = '' //职务副职责
          d.six.right.info = ''
          break;

        default:
          break;

      }

    },
    downLoadExcel () {

      // this.donwLoadLoading = true

      // setTimeout(() => {
      //   this.donwLoadLoading = false
      // }, 2000);

      let params = this.getParams()

      let arrName = Object.keys(params)

      let arrVal = Object.values(params)

      let len = arrName.length

      let formTarget = document.querySelector('.employRoster').querySelector('#downLoadForm')
      formTarget.innerHTML = ''

      for (let i = 0; i < len; i++) {
        let dom = document.createElement('input')
        dom.name = arrName[i]
        dom.value = arrVal[i]
        formTarget.appendChild(dom)
      }


      let tokenDom = document.createElement('input')
      tokenDom.name = 'token'
      tokenDom.value = localStorage.getItem('token')
      formTarget.appendChild(tokenDom)

      let selectArrDom = document.createElement('input')
      selectArrDom.name = 'showColumns'
      selectArrDom.value = this.tableOptionSelect
      formTarget.appendChild(selectArrDom)

      formTarget.submit()
      // let text = document.querySelector('#employRoster_hidden_frame')
      // text.onload = text.onreadystatechange = function () {
      //     console.log("wancheng");
      //     if (this.readyState && this.readyState != 'complete') return;
      //     else {
      //       console.log('xxx')
      //     }
      // }

      // console.log(text.contentWindow.document.body, 'text.document.body.innerHTML')

    },
    handleSearchCheck (i) {
      if (this.searchCheckModel[i]) {
        this.searchCheckModel.forEach((ele, index, arr) => {
          if (index !== i) arr[index] = false
        })

        let params = {
          conditionName: this.searchCheckList[i].conditionName
        }


        this.Axios

          .Post(this.URL.queryConditionDetail.url, params)
          .then((res) => {
            if (res.data.status == 1) {
              this.qqc = false
              let t = this.formTop, d = this.formBottom, datas = res.data.datas

              setTimeout(() => {
                t.two.inputValue.id = datas.deptid;//部门
                t.two.inputValue.info = datas.descr;	//部门
                d.six.right.id = datas.job_sub_func; //职务副职责
                d.six.right.info = datas.job_sub_func_desc;
              }, 100)


              t.one.model = datas.setid,   // 业务单位
                t.two.showIf = !!(parseInt(datas.whether_sub_department)),  //是否显示子部门
                t.three.id = datas.company,  //发薪组织  
                t.three.info = datas.com_desc,  //发薪组织  

                t.fouth[0] = datas.begin_age,// 年龄开始
                t.fouth[1] = datas.end_age,// 年龄结束
                t.five = datas.sex.split(','), //性别
                t.six = datas.mar_status.split(','), // 婚姻状况
                t.seven.model = datas.hr_status, //hr状态  A有效/I无效
                t.eight.model = datas.political_sta_chn, //政治面貌
                t.nine.model = datas.highest_edu, //最高学历

                d.one.left = datas.name, //姓名 
                d.one.right.id = datas.emplid, //员工ID
                d.one.right.info = datas.emplidName, //

                d.two.left = datas.national_id, //身份证号码
                d.two.right = datas.c_eas_emplid,  //eas编码

                d.three.left.model = datas.empl_class, //员工类别
                d.three.right.model = datas.c_posn_clan, //员工大类
                d.fouth.left.model = datas.c_empl_attr,  //员工属性
                d.fouth.right.model = datas.c_empl_sub_attr,  //员工属性子类
                d.five.left.model = datas.c_profss_tp_id, // 专业类别代码
                d.five.right = !!(parseInt(datas.major_professional_category)), //主要专业类别
                d.six.left.model = datas.job_function, //职务职责代码

                d.seven.left.model = datas.c_grp_supv_lvl, //集团标准职级
                d.seven.right.model = datas.c_sta_supv_lvl, //二级公司标准职级
                d.eight.model = datas.leader_type,//高管身份
                d.nine.left.model = datas.c_ovsea_talent, //海外人才
                d.nine.right = !!(parseInt(datas.whether_ovsea)), //是否海外派遣   
                d.ten.left.model = datas.c_language_type_desc ? datas.c_language_type_desc.split(',') : [], //语言技能
                d.ten.right.model = datas.before_work_place, //以前工作的地区

                d.tentwo = datas.c_speci_suit, //特长

                d.tenone = []

              if (datas.including_posts) d.tenone.push('包含兼岗')
              if (datas.c_one_child_cert) d.tenone.push('独生子女证')
              if (datas.c_special_poor) d.tenone.push('特困人员')
              if (datas.c_support_jiang) d.tenone.push('援疆')
              if (datas.c_support_zang) d.tenone.push('援藏')

              setTimeout(() => { this.qqc = true }, 100)

            }
          })
      }
    },
    getSearchData () {
      this.Axios
        .Post(this.URL.queryBeforeCondition.url)
        .then((res) => {
          let list = res.data.datas.showList
          if (list.length) {
            this.searchCheckList = list
            list.forEach(element => {
              this.searchCheckModel.push(false)
            })
          }
        })
    },
    handleSure () {
      this.showSelectDialog = false
      this.tableOptionAsync = this.tableSelectLabel

      let params = {
        showColumns: this.tableOptionSelect
      }
      this.Axios
        .Post(this.URL.saveOrUpdateShowColumn.url, params)
        .then((res) => { console.log(res) })
    },
    getBaseData () {
      this.Axios
        .Post(this.URL.getEmpRosterCondition.url)
        .then((res) => {
          let datas = res.data.datas
          this.formTop.one.selectList = datas.businessList
          this.formTop.nine.selectList = datas.highestEdeList  //最高学历
          this.formTop.seven.selectList = datas.hrStatusList  //HR状态
          this.formTop.eight.selectList = datas.politicalStaList //政治面貌
        })
    },

    getDetailData () {

      this.Axios
        .Post(this.URL.getEmpRosterAgeinCondition.url)
        .then((res) => {
          let datas = res.data.datas

          this.formBottom.three.left.selectList = datas.emplClassList // 员工类别
          this.formBottom.three.right.selectList = datas.posnClanList // 员工大类

          this.formBottom.fouth.left.selectList = datas.emplAttrList  // 员工属性
          this.formBottom.fouth.right.selectList = datas.emplSubAttrList  // 员工属性子类

          this.formBottom.five.left.selectList = datas.profssTpList  // 专业类别代码

          this.formBottom.six.left.selectList = datas.jobFunctionList // 职务职责代码
          this.formBottom.seven.right.selectList = datas.staSupvList // 二级公司标准职级
          this.formBottom.seven.left.selectList = datas.grpSupvList  //   集团标准职级
          this.formBottom.nine.left.selectList = datas.ovseaTalentList  //海外人才
          this.formBottom.ten.left.selectList = datas.languageList   // 语言技能
          this.formBottom.ten.right.selectList = datas.countryList  //以前工作国家/地区

          this.formBottom.eight.selectList = datas.leaderTypeList      //  高管身份

        })

    },


    handleAllInfo () {
      this.showAll = !this.showAll
      if (this.showAll) {
        setTimeout(() => {
          window.scrollTo(0, 570);
        }, 300);
      }


    },
    getParams () {

      let t = this.formTop, d = this.formBottom, yuanGongIDVal, deptid, emplid, job_sub_func
      yuanGongIDVal = document.querySelector('.employRoster').querySelector('#yuangongID').querySelector('input').value.replace(/[^0-9]/ig, "")


      let params = {

        setid: this.setid,   // 业务单位
        deptid: t.two.inputValue.id,	//部门
        whether_sub_department: (t.two.showIf - 0),  //是否显示子部门
        company: t.three.id,  //发薪组织
        begin_age: t.fouth[0],// 年龄开始
        end_age: t.fouth[1],// 年龄结束
        sex: t.five.toString(), //性别
        mar_status: t.six.toString(), // 婚姻状况
        hr_status: t.seven.model, //hr状态  A有效/I无效
        political_sta_chn: t.eight.model, //政治面貌
        highest_edu: t.nine.model, //最高学历


        name: d.one.left, //姓名 
        emplid: yuanGongIDVal, //员工ID
        national_id: d.two.left, //身份证号码
        c_eas_emplid: d.two.right,  //eas编码

        empl_class: d.three.left.model, //员工类别
        c_posn_clan: d.three.right.model, //员工大类
        c_empl_attr: d.fouth.left.model,  //员工属性
        c_empl_sub_attr: d.fouth.right.model,  //员工属性子类
        c_profss_tp_id: d.five.left.model, // 专业类别代码
        major_professional_category: (d.five.right - 0), //主要专业类别
        job_function: d.six.left.model, //职务职责代码
        job_sub_func: d.six.right.id, //职务副职责
        c_grp_supv_lvl: d.seven.left.model, //集团标准职级
        c_sta_supv_lvl: d.seven.right.model, //二级公司标准职级
        leader_type: d.eight.model,//高管身份
        c_ovsea_talent: d.nine.left.model, //海外人才
        whether_ovsea: (d.nine.right - 0), //是否海外派遣   
        c_language_type_desc: d.ten.left.model.toString(), //语言技能
        before_work_place: d.ten.right.model, //以前工作的地区
        c_speci_suit: d.tentwo, //特长
        including_posts: d.tenone.filter(ele => ele == '包含兼岗').length, //包含兼岗
        c_one_child_cert: d.tenone.filter(ele => ele == '独生子女证').length, //独生子女证
        c_special_poor: d.tenone.filter(ele => ele == '特困人员').length, //特困人员
        c_support_jiang: d.tenone.filter(ele => ele == '援疆').length, //援疆
        c_support_zang: d.tenone.filter(ele => ele == '援藏').length //援藏

      }

      return params

    },
    searchAjax () {

      this.Axios
        .Post(this.URL.getUserShowColumn.url)
        .then((res) => {
          this.tableOptionSelect = res.data.datas.showColumns
          this.tableOptionAsync = this.tableSelectLabel


        })


      this.getTableData()

    },

    getTableData () {
      let params = this.getParams()

      params.pageNum = this.page.pageNum
      params.pageSize = this.page.pageSize

      this.Axios
        .Post(this.URL.queryEmpRosterList.url, params)
        .then((res) => {
          let datas = res.data.datas.showList
          this.tableDatas = datas
          this.tableShow = true

          const page = res.data.page
          this.page.pageNum = page.pageNum
          this.page.total = page.total
          setTimeout(() => {
            window.scrollTo(0, 630)
          }, 300)
        })
    },
    handleIconClick (event) {
      let e = event ? event : window.event

      let target = e.target || e.srcElement
      if (!this.setid && target.offsetParent.getAttribute('data-type') === '部门') return

      if (!this.bh && target.offsetParent.getAttribute('data-type') === '职务副职责') return
      this.type = target.offsetParent.getAttribute('data-type')
      this.dialogShowIf = true
    },


    handleEmptyValue (data) {

      if (data.info !== undefined && data.id !== undefined) {
        if (data.info == '') {
          return `${data.id}`
        } else {
          return `${data.info} (${data.id})`
        }
      } else {
        return ''
      }


    },


    saveSearch () {
      MessageBox.prompt('请为该搜索条件命名', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /\S/,
        inputErrorMessage: '内容不能为空'
      }).then(({ value }) => {

        let t = this.formTop, d = this.formBottom

        let params = this.getParams()

        params.descr = t.two.inputValue.info

        params.com_desc = t.three.info

        params.emplidName = d.one.right.info

        params.job_sub_func_desc = d.six.right.info


        params.conditionName = value

        this.Axios
          .Post(this.URL.saveEmpRosterCondition.url, params)
          .then((res) => {
            if (res.data.status === 1) {
              this.searchCheckList.push({ conditionName: value })
              this.searchCheckModel.push(false)
              Message({
                type: 'success',
                message: '保存成功'
              })
            }
          })

      }).catch(() => {

      });
    },

    getTableSelected (data) {
      switch (this.type) {
        case '发薪组织':
          this.formTop.three = data
          break;

        case '部门':
          this.formTop.two.inputValue = data
          break;

        case '员工姓名':
          this.formBottom.one.left = data
          break;

        case '员工ID':
          this.formBottom.one.right = data
          break;

        case '职务副职责':
          this.formBottom.six.right = data
          break

        default:
          break;
      }

    }
  },

  directives: {
    appendInfo: {
      bind (el, binding, vnode) {
        let firstDom, secondDom, newDomFirst, newDomSecond
        firstDom = el.querySelectorAll('.el-slider__button-wrapper')[0]
        secondDom = el.querySelectorAll('.el-slider__button-wrapper')[1]

        firstDom.style.Position = 'relative'
        secondDom.style.Position = 'relative'

        newDomFirst = document.createElement('span')
        newDomSecond = document.createElement('span')

        newDomFirst.className = 'tip'
        newDomSecond.className = 'tip'


        newDomFirst.innerText = binding.value[0]
        newDomSecond.innerText = binding.value[1]

        firstDom.appendChild(newDomFirst)
        secondDom.appendChild(newDomSecond)
      },

      update (el, binding, vnode) {
        let ele = el.querySelectorAll('.tip')
        for (let i = 0; i < ele.length; i++) {
          ele[i].innerText = binding.value[i]
        }

      }
    }
  },

};
</script>


<style lang="less" >
.employRoster {
  .title {
    background-color: #fff;
    h1 {
      text-align: center;
      font-size: 20px;
      line-height: 50px;
      border-bottom: 1px solid #f4f4f4;
    }
  }

  /* 表单 (主要内容)*/
  .form {
    /* 第一个表单 开始*/
    background-color: #fff;
    padding: 15px 20px;

    /* 公用样式开始*/

    .button {
      display: inline-block;
      padding: 5px 16px 4px 16px;
      border: 1px solid #bfcbd9;
      border-radius: 20px;
      margin: 1% 0 1% 8.5%;
      cursor: pointer;
      &:hover {
        color: #20a0ff;
        border-color: #0190fe;
      }
    }
    .button.is-select {
      color: #20a0ff;
      border-color: #0190fe;
    }

    .saveSearch {
      cursor: pointer;
      color: #41b883;
    }

    .marginLeft-10 {
      margin-left: 10%;
    }

    .marginLeft-12 {
      margin-left: 12.7%;
    }

    .marginLeft-8 {
      margin-left: 8%;
    }

    .marginBottom-40 {
      margin-bottom: 40px !important;
    }

    .close-x {
      position: absolute;
      top: 13px;
      left: 24.4%;
      color: #bfcbd9;
      background-color: #fff;
      cursor: pointer;
    }

    /* 公用样式结束*/

    .formTop {
      position: relative;

      .formTop-left {
        .tip {
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          top: -6px;
          font-size: 14px;
          line-height: 14px;
          color: #cecece;
        }
      }

      .formTop-right {
        position: absolute;
        right: 2%;
        top: 0;
        width: 26%;
        border: 2px solid #bfcbd9;
        ::-webkit-scrollbar {
          width: 0px;
        }

        & > h2 {
          background-color: #f5f5f6;
          color: #959595;
          text-align: center;
          font-size: 15px;
          font-weight: normal;
          padding: 6px 0;
        }

        & > div {
          height: 160px;
          overflow-y: auto;
          overflow-x: hidden;

          p {
            padding: 8px 0 8px 12px;
            position: relative;

            .check span {
              transform: scale(0.92);
            }
            span.name.select {
              color: #38f;
            }
            span.name {
              cursor: pointer;
              position: relative;
              top: 4px;
              left: 6px;
              font-size: 13px;
              display: inline-block;
              max-width: 170px;
              word-break: keep-all; /* 不换行 */
              white-space: nowrap; /* 不换行 */
              overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */
              text-overflow: ellipsis;
            }
            i {
              position: absolute;
              right: 10px;
              margin-top: 6px;
              cursor: pointer;
              &:hover {
                transform: scale(1.2);
              }
            }
          }
        }
      }
    }

    /* 第一个表单 结束*/

    /* 第二个表单 开始*/
    .formBottom {
      .transition-wrap {
        padding: 7% 0 2% 0;
      }
    }
    /* 第二个表单 结束*/
  }

  .dialog-check-wrap {
    .el-dialog__body {
      padding: 20px 0 5px 0 !important;
    }
    .dialog-check {
      max-height: 320px;
      overflow: auto;

      p {
        padding: 5px 0;
        position: relative;
        max-width: 60%;
        left: 10%;
      }
    }
  }

  /* 表格 (搜索结果)*/

  .employRoster-table {
    width: 100%;
    background-color: #fff;
    overflow: hidden;
    .table-color {
      background-color: #e4f0f5;
      height: 10px;
    }
    .table-form {
      display: inline-block;
      padding-top: 15px;
      padding-left: 15px;
    }
    .table-select {
      padding-top: 15px;
      padding-right: 15px;
      text-align: right;
      display: inline-block;
      float: right;
    }
    .fenye {
      padding-bottom: 30px;
      padding-left: 10px;
    }
  }

  /* UI样式修改*/

  // .el-form-item__label {
  //   width: 15%!important;
  // }
  .solong {
    .el-select {
      width: 430px !important;
      .el-input {
        min-height: 100px !important;

        input {
          min-height: 100px !important;
        }

        :-moz-placeholder {
          /* Mozilla Firefox 4 to 18 */
          color: #fff;
        }

        ::-moz-placeholder {
          /* Mozilla Firefox 19+ */
          color: #fff;
        }

        input:-ms-input-placeholder {
          color: #fff;
        }

        input::-webkit-input-placeholder {
          color: #fff;
        }
      }

      .el-select__tags {
        top: 2px;
        transform: translateY(0);
      }
    }
    .el-select-dropdown {
      min-width: 200px !important;
      max-width: 200px !important;
    }
    // i {
    //   display: none!important;
    // }
  }

  .el-form-item {
    margin-bottom: 10px !important;
  }

  .el-checkbox__inner {
    border-radius: 50% !important;
    border: 1px solid #bfcbd9 !important;
    background-color: #bfcbd9 !important;

    &::after {
      content: '';
      box-sizing: content-box !important;
      border: 2px solid #fff !important;
      border-left: 0 !important;
      border-top: 0 !important;
      height: 8px !important;
      left: 5px !important;
      position: absolute !important;
      top: 1px !important;
      -ms-transform: rotate(45deg) scaleY(1) !important;
      transform: rotate(45deg) scaleY(1) !important;
      width: 4px !important;
      transition: transform 0.15s cubic-bezier(0.71, -0.46, 0.88, 0.6) 0.05s !important;
      -ms-transform-origin: center !important;
      transform-origin: center !important;
      z-index: 909999 !important;
    }
  }

  .el-checkbox__input.is-checked {
    .el-checkbox__inner {
      border: 1px solid #20a0ff !important;
      background-color: #20a0ff !important;
    }
  }

  .el-slider__button-wrapper {
    z-index: 0 !important;
  }
}
</style>


